<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body class="tundra">
	<script type="text/javascript" src="../lib/dojo/dojo/dojo.js.uncompressed.js"
		djConfig="isDebug: true, debugAtAllCosts: true, parseOnLoad: false, usePlainJson: true"></script>
	<style>
		@import "../lib/dojo/dijit/themes/tundra/tundra.css"; /* required when dijit */	
		@import "../src/rforms/view/resources/rforms.css";
		.rdfjsonErrors td,
		.rdfjsonErrors th{
			border: 1px solid grey;
			padding-left: 0.4em;
			padding-right: 0.4em;
		}
		.rdfjsonErrors th{
			border-bottom: 2px solid grey;
		}
		.rdfjsonErrors {
			border-collapse: collapse;
		}
	 	.error td {
			background: red;
		}
	 	.warning td {
			background: orange;
		}
		
		#rdfjson table,
		#bindings table {
			width: 100%;
		}
		
		#rdf {
			width: 100%;
			height: 15em;
		}
	</style>
	<script type="text/javascript">
		dojo.registerModulePath("rforms","../../../src/rforms");
		dojo.registerModulePath("rdfjson","../../../src/rdfjson");
		dojo.require("rforms.template.ItemStore");		
		dojo.require("rdfjson.Graph");
		dojo.require("rforms.model.Engine");
		//dojo.require("rforms.view.Editor");

		//A simple template showing a title and an creator in the form of a foaf:Person with a firstname and lastname.
		//The person being shown in a table format.
		templateSrc = {
			"root":{
				"id": "testTemplate",
				"type":"group",
				"content":[
					{
						"type":"text",
						"nodetype":"LANGUAGE_LITERAL",
						"property":"http://purl.org/dc/terms/title",
						"cardinality": {"min": 2, "pref": "4", "max": 5},
						"label":{"en":"Title"},
						"description":{"en":"A short title of the resource"}
	    			}, {
						"type":"group",
						"nodetype":"RESOURCE",
						"label":{"en":"Creator"},
						"property":"http://purl.org/dc/terms/creator",
						"cardinality": {"min": 0, "pref": 1, "max": 5},
						"constraints":{"http://www.w3.org/TR/rdf-schema/type":"http://xmlns.com/foaf/0.1/Person"},
						"cls": ["rformsTable"],
						"content":[
							{
								"type":"text",
								"nodetype":"ONLY_LITERAL",
								"property":"http://xmlns.com/foaf/0.1/firstName",
								"label":{"en":"First name"}
							},{
								"type":"text",
								"nodetype":"ONLY_LITERAL",
								"property":"http://xmlns.com/foaf/0.1/surname",
								"label":{"en":"Surname"}
							}
						]
					}
				]
			}
		};
		
		//Simple rdfjson data, all triples are matched into the template.
		rdf = {
				"http://example.org/about2" : {
					"http://www.w3.org/TR/rdf-schema/type"	  : [ { "value" : "http://xmlns.com/foaf/0.1/Document", "type" : "uri"}]
			    } ,
				"http://example.org/about" : {
					"http://www.w3.org/TR/rdf-schema/type"	  : [ { "value" : "http://xmlns.com/foaf/0.1/Document", "type" : "uri"}],
			        "http://purl.org/dc/terms/title"   : [ { "value" : "Anna's Homepage", "type" : "literal", "lang" : "en" } ] ,
			        "http://purl.org/dc/terms/creator" : [ { "value" : "_:person", "type" : "bnode" } ]
			    } ,
			 
			    "_:person" : {
					"http://www.w3.org/TR/rdf-schema/type"	  : [ { "value" : "http://xmlns.com/foaf/0.1/Person", "type" : "uri"}],
			        "http://xmlns.com/foaf/0.1/firstName"     : [ { "value" : "Anna", "type" : "literal" } ] ,
			        "http://xmlns.com/foaf/0.1/surname"       : [ { "value" : "Wilder", "type" : "literal" } ]
			    }
			};

		
		dojo.addOnLoad(function() {
			var itemStore = new rforms.template.ItemStore();
	 		var ttemplate = itemStore.createTemplate(templateSrc);
			var bindingsNode = dojo.byId("bindings");
	 		
	 		var checkInstances = function(graph, type, template) {
	 			var instances = graph.find(null, "http://www.w3.org/TR/rdf-schema/type", type);
	 			dojo.forEach(instances, function(instance) {
	 				var iNode = dojo.create("div", null, bindingsNode)
					var binding = rforms.model.match(graph, instance.getSubject(), template);
					var report = binding.report();
					if (report.errors.length > 0 || report.warnings.length > 0) {
						dojo.create("div", {innerHTML: "Missing data for "+instance.getSubject()}, iNode);
						var table = dojo.create("table", {"class": "rdfjsonErrors"}, iNode);
						var head = dojo.create("tr", null, table);
						dojo.create("th", {innerHTML: "Subject"}, head);
						dojo.create("th", {innerHTML: "Predicate"}, head);
						dojo.create("th", {innerHTML: "Problem"}, head);
						dojo.create("th", {innerHTML: "Severity"}, head);
						dojo.forEach(report.errors, function(err) {
							var row = dojo.create("tr", {"class": "error"}, table);
							dojo.create("td", {innerHTML: "Error"}, row);
							dojo.create("td", {innerHTML: err.s}, row);
							dojo.create("td", {innerHTML: err.p}, row);
							dojo.create("td", {innerHTML: err.message}, row);
						});
						dojo.forEach(report.warnings, function(err) {
							var row = dojo.create("tr", {"class": "warning"}, table);
							dojo.create("td", {innerHTML: "Warning"}, row);
							dojo.create("td", {innerHTML: err.s}, row);
							dojo.create("td", {innerHTML: err.p}, row);
							dojo.create("td", {innerHTML: err.message}, row);
						});						
						
					} else {
						dojo.create("div", {innerHTML: "No missing fields for "+instance.getSubject()}, iNode);
					}
				});		
			};

			
			dojo.attr(dojo.byId("rdf"), "value", dojo.toJson(rdf,1));
			var rj = dojo.byId("rdfjson");
			try {
				var graph = new rdfjson.Graph(rdf);
				dojo.create("div", {innerHTML: "The RDF/JSON format validated fine with "+graph.report.nr+" statements found."}, rj);
				checkInstances(graph, "http://xmlns.com/foaf/0.1/Document", ttemplate);
			} catch (e) {
				dojo.create("div", {innerHTML: "<b>"+e.nr+"</b> valid statements found, and <b>"+e.errors.length+"</b> errors."}, rj);
				var table = dojo.create("table", {"class": "rdfjsonErrors"}, rj);
				var head = dojo.create("tr", null, table);
				dojo.create("th", {innerHTML: "Subject"}, head);
				dojo.create("th", {innerHTML: "Predicate"}, head);
				dojo.create("th", {innerHTML: "ObjectNr"}, head);
				dojo.create("th", {innerHTML: "Error"}, head);
				dojo.forEach(e.errors, function(err) {
					var row = dojo.create("tr", null, table);
					dojo.create("td", {innerHTML: err.s}, row);
					dojo.create("td", {innerHTML: err.p || ""}, row);
					dojo.create("td", {innerHTML: ""+ (err.oindex || "")}, row);
					dojo.create("td", {innerHTML: err.message}, row);
				});
			}
			//			var e = new rforms.apps.Experiment({templateObj: templateSrc, graphObj: rdf, hideTemplate: true}, "container");
	//		e.startup();
		});
	</script>
	<textarea id="rdf"></textarea>
	<div id="rdfjson"></div>
	<div id="bindings"></div>
	<div id="container"></div>
  </body>
</html>